<template>
  <div class="components-demo">
    <el-card shadow="hover" class="demo-card">
      <template #header>
        <span>组件库演示</span>
      </template>
      
      <!-- 按钮组件 -->
      <div class="demo-section">
        <h3>按钮组件</h3>
        <div class="demo-content">
          <el-button type="primary">Primary</el-button>
          <el-button type="success">Success</el-button>
          <el-button type="warning">Warning</el-button>
          <el-button type="danger">Danger</el-button>
          <el-button type="info">Info</el-button>
          <el-button plain>Plain</el-button>
          <el-button round>Round</el-button>
          <el-button circle>
            <el-icon><Search /></el-icon>
          </el-button>
        </div>
      </div>
      
      <!-- 标签组件 -->
      <div class="demo-section">
        <h3>标签组件</h3>
        <div class="demo-content">
          <el-tag>默认标签</el-tag>
          <el-tag type="success">成功标签</el-tag>
          <el-tag type="warning">警告标签</el-tag>
          <el-tag type="danger">危险标签</el-tag>
          <el-tag type="info">信息标签</el-tag>
          <el-tag size="large">大尺寸</el-tag>
          <el-tag size="small">小尺寸</el-tag>
        </div>
      </div>
      
      <!-- 开关组件 -->
      <div class="demo-section">
        <h3>开关组件</h3>
        <div class="demo-content">
          <el-switch v-model="switchValue1" />
          <el-switch v-model="switchValue2" active-text="开" inactive-text="关" />
          <el-switch v-model="switchValue3" size="large" />
          <el-switch v-model="switchValue4" disabled />
        </div>
      </div>
      
      <!-- 输入框组件 -->
      <div class="demo-section">
        <h3>输入框组件</h3>
        <div class="demo-content">
          <el-input v-model="inputValue" placeholder="请输入内容" style="width: 200px" />
          <el-input v-model="inputValue2" placeholder="带清除按钮" clearable style="width: 200px" />
          <el-input v-model="inputValue3" placeholder="禁用状态" disabled style="width: 200px" />
          <el-input-number v-model="numberValue" :min="1" :max="100" style="width: 200px" />
        </div>
      </div>
      
      <!-- 选择器组件 -->
      <div class="demo-section">
        <h3>选择器组件</h3>
        <div class="demo-content">
          <el-select v-model="selectValue" placeholder="请选择" style="width: 200px">
            <el-option label="选项1" value="option1" />
            <el-option label="选项2" value="option2" />
            <el-option label="选项3" value="option3" />
          </el-select>
          <el-select v-model="selectValue2" placeholder="可搜索" filterable style="width: 200px">
            <el-option label="选项A" value="a" />
            <el-option label="选项B" value="b" />
            <el-option label="选项C" value="c" />
          </el-select>
        </div>
      </div>
      
      <!-- 日期时间选择器 -->
      <div class="demo-section">
        <h3>日期时间选择器</h3>
        <div class="demo-content">
          <el-date-picker
            v-model="dateValue"
            type="date"
            placeholder="选择日期"
            style="width: 200px"
          />
          <el-time-picker
            v-model="timeValue"
            placeholder="选择时间"
            style="width: 200px"
          />
        </div>
      </div>
      
      <!-- 时间范围选择器（高级筛选） -->
      <div class="demo-section">
        <h3>时间范围选择器（高级筛选）</h3>
        <div class="demo-content">
          <el-form-item label="时间范围">
            <el-date-picker
              v-model="timeRangeValue"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              :shortcuts="dateShortcuts"
              format="YYYY-MM-DD HH:mm:ss"
              value-format="YYYY-MM-DD HH:mm:ss"
              style="width: 400px"
              :teleported="true"
              popper-class="datetime-picker-popper"
              :clearable="true"
            />
          </el-form-item>
          <el-button type="primary" @click="handleDemoReset">重置为默认时间</el-button>
          <el-button @click="handleDemoClear">清空</el-button>
        </div>
        <div class="demo-description">
          <p><strong>配置说明：</strong></p>
          <ul>
            <li>快捷选项：最近1小时、最近6小时、今天、昨天、最近7天</li>
            <li>默认时间范围：今天0点到当前时刻</li>
            <li>格式：YYYY-MM-DD HH:mm:ss</li>
            <li>支持清空和重置功能</li>
          </ul>
          <p v-if="timeRangeValue" style="margin-top: 12px; color: #606266;">
            <strong>当前值：</strong>{{ timeRangeValue[0] }} 至 {{ timeRangeValue[1] }}
          </p>
        </div>
      </div>
      
      <!-- 统计卡片样式 -->
      <div class="demo-section">
        <h3>统计卡片样式</h3>
        <div class="demo-content stat-cards">
          <div class="stat-card active">
            <div class="stat-icon">
              <el-icon><Check /></el-icon>
            </div>
            <div class="stat-content">
              <div class="stat-number">123</div>
              <div class="stat-label">活跃</div>
            </div>
          </div>
          
          <div class="stat-card monitored">
            <div class="stat-icon">
              <el-icon><View /></el-icon>
            </div>
            <div class="stat-content">
              <div class="stat-number">456</div>
              <div class="stat-label">监控中</div>
            </div>
          </div>
          
          <div class="stat-card alert-enabled">
            <div class="stat-icon">
              <el-icon><Bell /></el-icon>
            </div>
            <div class="stat-content">
              <div class="stat-number">78</div>
              <div class="stat-label">告警启用</div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 操作按钮组 -->
      <div class="demo-section">
        <h3>操作按钮组（圆形）</h3>
        <div class="demo-content action-buttons">
          <el-tooltip content="查看详情" placement="top">
            <el-button type="primary" size="small" circle>
              <el-icon><View /></el-icon>
            </el-button>
          </el-tooltip>
          
          <el-tooltip content="编辑" placement="top">
            <el-button type="warning" size="small" circle>
              <el-icon><Edit /></el-icon>
            </el-button>
          </el-tooltip>
          
          <el-tooltip content="删除" placement="top">
            <el-button type="danger" size="small" circle>
              <el-icon><Delete /></el-icon>
            </el-button>
          </el-tooltip>
          
          <el-tooltip content="搜索" placement="top">
            <el-button type="info" size="small" circle>
              <el-icon><Search /></el-icon>
            </el-button>
          </el-tooltip>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { Search, View, Edit, Delete, Check, Bell } from '@element-plus/icons-vue'

const switchValue1 = ref(true)
const switchValue2 = ref(false)
const switchValue3 = ref(true)
const switchValue4 = ref(false)

const inputValue = ref('')
const inputValue2 = ref('')
const inputValue3 = ref('禁用输入')
const numberValue = ref(10)

const selectValue = ref('')
const selectValue2 = ref('')

const dateValue = ref('')
const timeValue = ref('')
const timeRangeValue = ref(null)

// 时间快捷选项
const dateShortcuts = [
  {
    text: '最近1小时',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setHours(start.getHours() - 1)
      return [start, end]
    }
  },
  {
    text: '最近6小时',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setHours(start.getHours() - 6)
      return [start, end]
    }
  },
  {
    text: '今天',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setHours(0, 0, 0, 0)
      return [start, end]
    }
  },
  {
    text: '昨天',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setDate(start.getDate() - 1)
      start.setHours(0, 0, 0, 0)
      end.setDate(end.getDate() - 1)
      end.setHours(23, 59, 59, 999)
      return [start, end]
    }
  },
  {
    text: '最近7天',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setDate(start.getDate() - 7)
      return [start, end]
    }
  }
]

// 设置默认时间范围：今天0点到当前时刻
const setDefaultTimeRange = () => {
  const now = new Date()
  const startOfToday = new Date()
  startOfToday.setHours(0, 0, 0, 0)
  
  // 格式化为 YYYY-MM-DD HH:mm:ss
  const formatDateTime = (date) => {
    const year = date.getFullYear()
    const month = String(date.getMonth() + 1).padStart(2, '0')
    const day = String(date.getDate()).padStart(2, '0')
    const hours = String(date.getHours()).padStart(2, '0')
    const minutes = String(date.getMinutes()).padStart(2, '0')
    const seconds = String(date.getSeconds()).padStart(2, '0')
    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
  }
  
  timeRangeValue.value = [formatDateTime(startOfToday), formatDateTime(now)]
}

// 重置为默认时间
const handleDemoReset = () => {
  setDefaultTimeRange()
}

// 清空时间范围
const handleDemoClear = () => {
  timeRangeValue.value = null
}

// 组件挂载时设置默认时间范围
onMounted(() => {
  setDefaultTimeRange()
})
</script>

<style scoped>
.components-demo {
  padding: 0;
  margin-top: 20px;  /* 标签页内容区域顶部间距 */
}

.demo-card {
  border-radius: 8px;
}

.demo-section {
  margin-bottom: 32px;
}

.demo-section:last-child {
  margin-bottom: 0;
}

.demo-section h3 {
  margin: 0 0 16px 0;
  font-size: 16px;
  font-weight: 600;
  color: #303133;
  padding-bottom: 8px;
  border-bottom: 2px solid #e4e7ed;
}

.demo-content {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

.demo-description {
  margin-top: 16px;
  padding: 12px;
  background: #f5f7fa;
  border-radius: 4px;
  font-size: 14px;
  line-height: 1.6;
}

.demo-description p {
  margin: 0 0 8px 0;
}

.demo-description ul {
  margin: 8px 0 0 0;
  padding-left: 20px;
}

.demo-description li {
  margin-bottom: 4px;
}

/* 统计卡片 */
.stat-cards {
  display: flex;
  gap: 20px;
}

.stat-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: #fff;
  border-radius: 8px;
  border: 1px solid #e4e7ed;
  min-width: 120px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.stat-card.active .stat-icon {
  background: rgba(103, 194, 58, 0.1);
  color: #67c23a;
}

.stat-card.monitored .stat-icon {
  background: rgba(64, 158, 255, 0.1);
  color: #409eff;
}

.stat-card.alert-enabled .stat-icon {
  background: rgba(230, 162, 60, 0.1);
  color: #e6a23c;
}

.stat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 6px;
}

.stat-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.stat-number {
  font-size: 20px;
  font-weight: 700;
  color: #303133;
}

.stat-label {
  font-size: 12px;
  color: #606266;
}

/* 操作按钮组 */
.action-buttons {
  display: flex;
  gap: 8px;
}

.action-buttons .el-button {
  width: 32px;
  height: 32px;
  padding: 0;
  transition: all 0.3s ease;
}

.action-buttons .el-button:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
</style>

<style>
/* 时间选择器弹出层优化（全局样式，不使用scoped） */
/* 确保时间选择面板正确显示在日期输入框上层 */
.datetime-picker-popper {
  z-index: 3000 !important;
}

.datetime-picker-popper .el-picker-panel__body {
  min-height: 380px;
}

.datetime-picker-popper .el-date-range-picker__time-header {
  position: relative;
  z-index: 1;
}

.datetime-picker-popper .el-picker-panel__content {
  margin: 0;
}

/* 确保时间选择面板不被日期面板遮挡 */
.datetime-picker-popper .el-time-panel {
  position: absolute;
  z-index: 2 !important;
  background: white;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

/* 优化日期时间范围选择器的布局 */
.datetime-picker-popper.el-popper {
  transform-origin: center top !important;
}
</style>

